<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字幕式标题</title>
</head>

<body>
    https://codepen.io/coderthegreat/details/abzrOpg
    <header id="header">
        <h1 id="title">Boring header</h1>
    </header>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias aliquam reprehenderit maiores libero iusto
        aspernatur
        rerum, sed ratione perferendis eum cum eveniet officiis asperiores mollitia voluptatum nam aut, ad adipisci
        numquam
        quis rem error doloribus. Dicta numquam laboriosam a labore repellendus obcaecati officiis nesciunt suscipit
        nihil,
        ab error, rem voluptatibus autem quos magni at mollitia voluptatem quod unde reprehenderit veniam totam saepe in
        quibusdam? Quis tempore ducimus error similique excepturi inventore. Ad error nihil nobis ab ratione dolorem
        quos!
        Veniam dicta fuga soluta eum error itaque earum delectus placeat provident beatae ipsa enim dignissimos
        accusantium
        iusto rem ipsum blanditiis, officia, pariatur aperiam reiciendis nobis. Odio atque laudantium cum cumque. Quas,
        excepturi sint. Inventore obcaecati molestias voluptate atque aliquam, et enim suscipit qui itaque,
        necessitatibus
        libero! Voluptatem ipsa corrupti doloremque molestias veritatis possimus ducimus excepturi, aut porro dolorum
        ipsum,
        cupiditate quidem! Quia consequuntur illo rerum error deleniti. Neque perferendis eaque dicta beatae molestiae
        eius
        dolore ratione cum iusto eos dolores quos in nostrum esse illo vitae dolor, magnam nihil! Distinctio quod harum
        officiis. Aliquam dicta accusantium autem, natus sed nobis optio porro reprehenderit rem deserunt ea laboriosam
        impedit laudantium cumque illo quas explicabo? Id est, non iure debitis sint porro natus aut fugiat doloremque
        ipsum
        odio ipsam obcaecati eaque? Fugiat accusamus rem beatae repudiandae unde optio libero sed adipisci dolore. Fuga
        facilis soluta non temporibus facere, blanditiis asperiores ipsam eos expedita, excepturi dignissimos rerum illo
        totam fugiat maxime, perspiciatis architecto iste impedit amet? Rerum, nulla! Cum accusantium optio, deserunt
        tempora blanditiis reiciendis incidunt maiores tenetur amet dolor molestiae, aliquid sapiente facilis pariatur
        quisquam praesentium quasi atque rerum ducimus at earum, doloribus laborum iure? Aspernatur saepe a doloremque,
        veniam libero ullam laborum perferendis repellendus architecto expedita itaque exercitationem omnis commodi
        dolore,
        delectus pariatur excepturi similique. Hic deserunt nisi eligendi? Sit a iure excepturi deleniti eius rerum
        cupiditate, rem illum corrupti. Consequuntur rerum, illo quam earum laboriosam cum corrupti inventore ipsam
        voluptatum exercitationem deleniti id quasi rem aspernatur similique culpa nostrum harum natus nihil minima
        necessitatibus, atque qui placeat? Neque voluptatum consectetur fugit nesciunt id temporibus accusamus, dolore
        incidunt nemo repellendus aliquid ea perspiciatis obcaecati facere ab sequi aperiam asperiores pariatur sint
        minima
        reiciendis ipsam velit sapiente ratione. Cum exercitationem rerum inventore et porro adipisci voluptates
        molestiae,
        id odio laboriosam fugiat nesciunt. Labore deleniti ea in beatae explicabo temporibus quisquam debitis sunt,
        excepturi repellat quo nisi dolor maiores, necessitatibus iure. Magnam libero praesentium quae ratione soluta
        eveniet repellat. Aspernatur rem laudantium nesciunt laboriosam iste inventore ipsa est ipsum tenetur? Numquam
        nulla
        odio eos commodi exercitationem vitae saepe minima magni neque, atque id ut accusamus quia repellendus ducimus
        inventore omnis mollitia itaque doloribus necessitatibus similique sapiente voluptatem nemo ratione. Cumque
        veniam
        impedit incidunt sapiente aut perferendis ut dolor. Vel, aut. Aut repudiandae repellendus dolore, cupiditate
        libero
        quaerat voluptatem laudantium dolor ut, voluptatibus molestias earum ab pariatur aliquid, dolorum totam! Sint,
        blanditiis! Accusantium, doloribus. Molestiae tenetur adipisci quibusdam aliquid, reiciendis debitis culpa
        pariatur
        repellat, placeat laudantium veritatis? Ipsum reiciendis, doloremque non similique excepturi amet ipsam? Lorem
        ipsum, dolor sit amet consectetur adipisicing elit. Sed possimus quae hic quam! Iusto explicabo alias eius
        dignissimos perferendis magni saepe sed, ut nulla ipsa expedita qui harum cupiditate architecto dicta! Ipsam qui
        quas facere cumque ipsum exercitationem error et, sunt rem! Atque quam, eius unde quaerat laboriosam voluptates
        soluta voluptate expedita minus deleniti ea illum eligendi perspiciatis mollitia quo alias maiores qui? Autem
        laboriosam et eius iusto unde ipsa veritatis. Provident illum, aliquid eius laborum nobis culpa ipsum esse
        quisquam
        at quo repellendus! Sint temporibus, in quo quos suscipit dicta. Nisi, cupiditate eveniet ab, ipsam, ipsum
        impedit
        veniam ea iusto possimus saepe sunt voluptatem nobis maxime doloremque quisquam debitis sint molestiae expedita
        eos
        est dicta architecto dolores. Consequatur numquam cupiditate magni repellendus aliquid veritatis reiciendis
        commodi
        eligendi accusamus fugit accusantium similique molestias, sunt dolore exercitationem odio placeat illum tempore
        repellat. Numquam vel nemo, assumenda aut voluptatem perferendis alias magni, doloribus eius consequatur, dolore
        eveniet tenetur voluptatibus ad porro error provident rerum sequi illum quod harum quas! Incidunt doloribus
        laudantium dolore aut distinctio recusandae, repudiandae nobis, suscipit id quaerat corrupti omnis ipsam, iure
        autem
        iusto eligendi nostrum ratione maxime. Perferendis repellendus tenetur corporis nobis ad hic! Quod atque tempora
        nam
        in. Vel rem adipisci consectetur sunt sed recusandae quidem laudantium cum, blanditiis aliquid debitis
        consequuntur
        minima ea praesentium accusantium fugit nobis architecto laboriosam molestiae earum in doloribus illum eaque
        iure!
        Optio ab voluptatem, perspiciatis accusantium tenetur ut eaque fugiat adipisci aspernatur voluptatibus
        consectetur
        dicta illo animi praesentium! Deleniti excepturi impedit ad quasi? Corrupti, sit velit aliquid non ab tenetur
        repellat. Beatae molestiae quas, maxime saepe placeat, numquam ab obcaecati eveniet assumenda totam maiores amet
        ipsum? Repudiandae, nobis totam tempora ad modi laudantium sequi consequatur voluptatem repellendus. Laudantium
        debitis eligendi magni nisi veniam repellat sunt molestias obcaecati veritatis cupiditate, illo rem iure
        laborum?
        Culpa porro aut corporis labore facilis ipsa id, mollitia cupiditate omnis illum cumque. Totam, consectetur
        assumenda. Laboriosam libero aliquid natus laborum facilis eaque ea recusandae doloribus dolore sit perspiciatis
        pariatur, voluptatem totam accusantium suscipit dolores cum debitis harum doloremque dolorum error illo quaerat!
        Recusandae alias ullam fugiat! Consequatur aspernatur illum error perspiciatis fugiat odio nesciunt, assumenda
        sunt
        velit officia possimus natus, maiores, cum beatae nobis vero tempore numquam! Distinctio laboriosam aperiam
        adipisci
        repellat error porro ducimus. Cum accusantium debitis numquam id quaerat perferendis autem minus alias corrupti
        quo
        natus quasi obcaecati amet nisi repudiandae, quas facilis accusamus nam iure quis nemo sit. Dolore, animi. Harum
        perferendis facere veniam reiciendis at modi culpa dolores laborum ex enim quis officia, tempore neque iste
        pariatur
        recusandae voluptatibus debitis quibusdam iusto excepturi. Nostrum distinctio reiciendis ea delectus illum
        labore,
        explicabo beatae nobis harum, nemo eveniet, molestias iure fugit inventore. Harum aliquam, odit quis
        perspiciatis
        assumenda animi! Nostrum, aspernatur recusandae. Alias exercitationem consectetur perspiciatis ullam suscipit
        fugiat
        vero earum porro hic omnis asperiores, sint provident sequi tenetur, iste itaque veniam fugit voluptates. Nulla
        minima sapiente dicta commodi debitis nam labore provident impedit adipisci doloremque quo, sed soluta repellat
        rem,
        ex consequatur. Corrupti, perferendis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nemo
        quisquam quia totam iste voluptatum voluptate vel enim dolorum harum ut, cum error deserunt saepe possimus odit
        delectus ipsa, optio amet. Necessitatibus quas aliquid aut ipsam in quia expedita laudantium fuga, dolorem
        asperiores possimus repellendus eveniet, eius voluptatem. Beatae laborum unde minus impedit expedita aperiam et
        modi
        tempore facilis corrupti dicta illum sit ad necessitatibus sed aut blanditiis ipsam iusto, hic rem. Laborum non,
        beatae repudiandae libero deserunt temporibus optio at aspernatur autem sequi corporis omnis nobis delectus aut
        earum facere blanditiis voluptatem natus nisi laudantium veritatis doloremque qui quos quam! Esse autem iste
        ratione. Officiis voluptate delectus eos nostrum? Minus excepturi consectetur quis cumque magnam sunt id
        facilis!
        Expedita distinctio sed omnis iusto harum laudantium qui cum quaerat, possimus accusantium sequi quidem aut nisi
        maiores minus, consequuntur quod. Distinctio voluptas necessitatibus, doloremque dolorem beatae eaque corporis?
        Temporibus tempora placeat excepturi ipsam non modi earum odit cumque incidunt iure officiis at, porro nobis
        nemo
        error sit impedit fugit eius molestias rerum unde ratione? Assumenda dolorem nobis temporibus voluptates eaque
        quibusdam rem. Sed nam hic soluta corporis facere excepturi voluptates, deserunt dolorem dolorum dolores beatae
        aperiam tenetur incidunt molestias quasi possimus non! Necessitatibus quos facilis provident eveniet vel veniam
        fuga, quas ratione ut sint repudiandae omnis tenetur ullam asperiores libero ab sequi! Porro earum ut magni
        perferendis, soluta quis sunt libero similique recusandae. Expedita quas corporis ducimus autem, facilis nam
        tempore
        placeat fugiat dolorem nulla incidunt! Soluta, asperiores recusandae deleniti quaerat iusto nobis aut minus
        voluptatem fugit voluptatum labore totam, sed magni ullam tenetur quae, laboriosam voluptates aspernatur quidem.
        Officiis eum ipsum non odit at sunt exercitationem reiciendis possimus aperiam consectetur tempora, nisi, ex
        iusto.
        Tenetur, nostrum culpa? Laudantium enim quibusdam, sunt amet corrupti natus neque aut hic consequuntur impedit
        laboriosam nesciunt magnam a magni voluptatem. Dicta, porro laudantium! Nobis possimus temporibus voluptas
        quasi!
        Exercitationem debitis molestiae dolorum incidunt alias numquam nihil unde ad veniam assumenda voluptates,
        dolore
        ipsum ullam mollitia corporis neque, hic iste deserunt inventore possimus ab delectus quos. Earum sit odit
        asperiores tempora accusantium ea beatae impedit ratione deserunt natus maxime, doloribus dolor? Dignissimos
        maxime,
        adipisci odit vel nemo omnis quas? Necessitatibus alias, porro nisi, molestiae quam laboriosam aut odio eveniet
        neque nam sapiente adipisci labore! Cupiditate officiis veritatis error minima quas, aperiam corrupti, vero,
        quisquam dolore quae harum explicabo eum rem deserunt doloremque! Veritatis libero architecto atque. Id eum iste
        cumque quo. Repellat omnis at sit vitae, voluptate hic magnam quisquam, fuga adipisci accusamus eos obcaecati,
        quibusdam sed modi. Facilis odit autem id. Unde excepturi eveniet aspernatur est praesentium nemo consequatur
        commodi obcaecati vero. Ipsa repudiandae velit sint rem praesentium nulla voluptates, quo cum fuga, eius minima
        libero. Vitae tempora, assumenda doloremque quis quae inventore debitis excepturi nostrum quia nisi officia
        corporis
        similique nesciunt odit enim sapiente necessitatibus ratione. Eos ex beatae tenetur doloribus placeat rem
        nostrum
        animi amet unde officiis mollitia, asperiores id. Hic in expedita culpa dolore tempore explicabo. Consequuntur
        id
        odio ut est officiis.</p>
    <style>
        body,
        html {
            padding: 0;
            margin: 0;
        }

        header {
            width: 85vw;
            margin-left: 5vw;
            border-bottom: 5px solid black;
            position: sticky;
            background-color: white;
            padding-left: 5vw;
            padding-top: 2vh;
            top: 0;
        }

        p {
            width: 500px;
            margin: 0 auto;
        }
    </style>
    <script>
        var scroll;
        var title = document.getElementById("title");
        var header = document.getElementById("header");
        function getScrollPercent() {
            var h = document.documentElement,
                b = document.body,
                st = 'scrollTop',
                sh = 'scrollHeight';
            return (h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight) * 100;
        }

        function check() {
            scroll = getScrollPercent();
            if (scroll > 0 && scroll < 15) {
                title.textContent = "Wait, where are you going?";
            } else if (scroll > 15 && scroll < 30) {
                title.textContent = "Don't worry, I know you'll be back.";
            } else if (scroll > 30 && scroll < 45) {
                title.textContent = "Stop scrolling, you meanie!";
            } else if (scroll > 45 && scroll < 60) {
                title.textContent = "If you stop scrolling, I'll give you sweets.";
            } else if (scroll > 60 && scroll < 75) {
                title.textContent = "Why do I exist, only to be scrolled away?";
            } else if (scroll > 75 && scroll <= 100) {
                title.textContent = "I'm ready, send me away";
            } else {
                title.textContent = "Boring header";
            }

            if (scroll > 75 && scroll <= 100) {
                header.style.top = Math.floor((-3.75 * (scroll - 75))).toString() + "px";
            } else {
                header.style.top = "0";
            }
            requestAnimationFrame(check);
        }
        check();
    </script>
</body>

</html>